<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css图片库</title>
  <style>
    div.gallery{
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 180px;
    }
    div.gallery:hover{
      border: 1px solid #777;
    }
    div.gallery img{
      width: 100%;
      height: auto;
    }
    div.desc{
      padding: 15px;
      text-align: center;
    }
  </style>
</head>
<!--
图片库
-->
<body>
<div class="gallery">
  <a href="/img/1.jpg" target="_blank">
    <img src="/img/1.jpg" alt="Bi zhi" width="600" height="400">
  </a>
  <div class="desc">此处添加图像描述</div>
</div>
<div class="gallery">
  <a href="/img/2.png" target="_blank">
    <img src="/img/2.png" alt="Bi zhi1" width="600" height="400">
  </a>
  <div class="desc">此处添加图像描述</div>
</div>
<div class="gallery">
  <a href="/img/3.jpg" target="_blank">
    <img src="/img/3.jpg" alt="Bi zhi2" width="600" height="400">
  </a>
  <div class="desc">此处添加图像描述</div>
</div>
<div class="gallery">
  <a href="/img/4.jpg" target="_blank">
    <img src="/img/4.jpg" alt="Bi zhi3" width="600" height="400">
  </a>
  <div class="desc">此处添加图像描述</div>
</div>
</body>
</html>
